<template>
  <!-- 页面-员工管理-查看挂职 -->
  <div class="innerPageTable-box-Three JobRelation-page innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        slot="adaption-bar"
        ref="jobSearchForm"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 员工编码 -->
        <Form-item prop="employeeNo" :label="$t('module.employee.employeeNo')">
          <Input type="text" v-model.trim="empInfo.employeeNo" :maxlength="30" disabled />
        </Form-item>
        <!-- 员工名称 -->
        <Form-item prop="name" :label="$t('module.employee.name')">
          <Input type="text" v-model.trim="empInfo.name" :maxlength="30" disabled />
        </Form-item>
        <!-- 部门 -->
        <Form-item prop="departmentName" :label="$t('module.employee.departmentDesc') + '　　'">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.departmentName"
            :placeholder="$t('module.employee.tip.enterDep')"
            @on-enter="searchHandler"
          ></Input>
        </Form-item>

        <!-- 职位 -->
        <Form-item prop="positionName" :label="$t('module.employee.positionDesc') + '　　'">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.positionName"
            :placeholder="$t('module.employee.tip.enterPosition')"
            @on-enter="searchHandler"
          ></Input>
        </Form-item>

        <!-- 职务 -->
        <Form-item prop="jobName" :label="$t('module.employee.jobCodeDesc') + '　　'">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.jobName"
            :placeholder="$t('module.employee.tip.enterPost')"
            @on-enter="searchHandler"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchHandler" />
          <RPButton optType="reset" @click="resetHandler" />
        </Form-item>
      </Form>
    </SelfAdaption>

    <InnerPageTable :config="tableConfig" ref="jobReationRef">
      <div slot="table-bar">
        <div class="operate-wrapper">
          <!-- <RPButton optType="create" @click="createHandler" />
          <RPButton optType="batch" @click="deletComform" /> -->
          <!-- <CommonImportExport :configs="importExportConfigs"></CommonImportExport> -->
        </div>
      </div>
    </InnerPageTable>

    <!-- table bar 添加-->
    <!-- <div class="job-action">
      <RPButton optType="create" @click="createHandler" />
      <RPButton optType="delete" @click="deletComform" />
    </div>
    <Table
      :columns="colomns"
      :data="searchTableData || tableData"
      @on-selection-change="onSelectHandler"
    ></Table>
    <Spin size="large" fix v-if="spinShow"></Spin>-->
  </div>
</template>
<script>
import { getJobList, getJobDetail, deletJobEmployee } from '@/api/employeeApi'
import { jobColmns } from './columns'
import EmployeeJobDetail from './EmployeeJobDetail.vue'
import locales from './locales.js'
import { jobBase } from './keys'
import { ComTypes, CoreModuleName } from '@/const.js'
import CommonImportExport from '@/components/import-and-export/index.vue'

export default {
  name: 'JobRelation',
  mixins: [locales],
  components: {
    CommonImportExport
  },
  data() {
    const { userInfo } = $store.state[CoreModuleName]
    return {
      tableData: [],
      searchTableData: null,
      spinShow: false,
      allSelection: [],
      searchForm: {
        employeeNo: this.empInfo.employeeNo,
        departmentName: '',
        jobName: '',
        positionName: '',
        tenantCode: userInfo.tenantCode || ''
      }
    }
  },
  props: {
    empInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    colomns() {
      // table所需的columns
      return jobColmns.call(this)
    },
    tableConfig() {
      return {
        loadDataFn: getJobList,
        columns: this.colomns, // 表格列配置
        initParam: this.searchForm,
        autoFirst: true,
        onSelectionChange: this.onSelectHandler,
        rowClassNameFn: this.rowClassName // 自定义行样式
      }
    },
    importExportConfigs() {
      const apiPrefix = window?.RPConfig?.mgt || ''
      return [
        {
          type: 'import',
          requestPath: `${apiPrefix}/employee/importEmployeeJobExcel`,
          successCallback: this.resetHandler
        },
        {
          type: 'export',
          btnText: '导出',
          requestPath: `${apiPrefix}/employee/exportEmployeeJob`,
          requestMethod: 'post',
          requestParams: {
            ...this.searchForm
          }
        },
        // 挂职和职位无拓展属性模板
        {
          type: 'export',
          btnText: '下载挂职模板',
          requestPath: `${apiPrefix}/employee/excelEmployeeJobTemplateExport`,
          requestMethod: 'get',
          requestParams: {}
        }
      ]
    }
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //positionDeleted:1-有效，0-无效,positionDeleted:1-已删除；0-未删除
      if (row.positionEnabled == 0 || row.positionDeleted == 1) {
        return 'tableDisableStyle'
      }
    },
    createHandler() {
      const { employeeNo } = this.empInfo
      const { $pageModal } = this
      // 根据keys创建空的details对象
      const details = jobBase.reduce((detail, key) => (detail[key] = '') || detail, {})
      const props = { details,type:"add", isEdit: true, employeeNo, allRecords: this.tableData }
      new $pageModal(EmployeeJobDetail, { props }, reset => reset && this.searchHandler())
    },
    // 搜索
    searchHandler() {
      this.$refs.jobReationRef.load(this.searchForm, 1)
    },
    // 重置
    resetHandler() {
      this.$refs.jobSearchForm.resetFields()
      this.searchHandler()
    },
    // 编辑弹窗
    async catEmpDetail(jobDetail,type, isEdit = false) {
      this.spinShow = true
      const { employeeNo } = this.empInfo
      try {
        // const res = await getJobDetail(jobId)
        const details = Object.assign({},jobDetail)
        this.spinShow = false
        new this.$pageModal(
          EmployeeJobDetail,
          { props: { details: details, type,isEdit, employeeNo, allRecords: this.tableData } },
          reset => {
            if (reset) this.searchHandler()
          }
        )
      } catch (error) {
        this.spinShow = false
      }
    },
    // 删除选中数据 二次确认弹窗
    deletComform() {
      const { allSelection = [] } = this
      if (allSelection.length === 0) {
        this.$message.error(this.$t('module.employee.tip.nodelete'))
        return
      }
      this.$confirm
        .warning(this.$t('module.employee.tip.deletComfirm'))
        .then(this.deleteHandler)
        .catch(_ => _)
    },
    // 删除
    async deleteHandler() {
      const { allSelection = [] } = this

      try {
        const delId = allSelection.map(s => s.id)
        const res = await deletJobEmployee(delId)
        if (res.data) {
          this.$message.success(this.$t('common.deleteSuccess'))
          // this.deleteTableData(delId);
          this.allSelection = []
          this.searchHandler()
        } else {
          this.$message.error(this.$t('module.employee.tip.deleteErr'))
        }
      } catch (error) {
        console.log('error', error)
      }
    },
    // 选择数据项
    onSelectHandler(selection) {
      this.allSelection = selection
    }
  }
}
</script>
<style lang="less">
// ok注释的样式
.JobRelation-page {
  .inner-table {
    .search-bar {
      display: none;
    }
  }
}
</style>
